<template>
  <div class="index">
    <div class="charts-container">
      <div class="chart-card" id="index1"></div>
      <div class="chart-card" id="index2"></div>
    </div>
  </div>
</template>

<script>
  import {getManageData} from '../../../api/api'
  import * as echarts from "echarts";
  export default {
    data() {
      return{
        myChart: null,
        myChart1: null,
        shuju: {},
      }
    },
    methods: {
      init() {
        getManageData().then(res => {
          if (res.code == 1000) {
            this.shuju = res.data
            var chartDom = document.getElementById('index1');
            this.myChart = echarts.init(chartDom);
            var option = {
              title: {
                text: '近七日景点预约',
                textStyle: {
                  fontSize: 18,
                  fontWeight: 500
                },
                left: 'center',
                top: 20
              },
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'shadow'
                }
              },
              legend: {
                data: ['预约数'],
                bottom: 10
              },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '15%',
                top: '15%',
                containLabel: true
              },
              xAxis: [
                {
                  type: 'category',
                  boundaryGap: true,
                  data: this.shuju.dates,
                  axisLine: {
                    lineStyle: {
                      color: '#ddd'
                    }
                  },
                  axisLabel: {
                    fontSize: 12,
                    color: '#666'
                  }
                }
              ],
              yAxis: [
                {
                  type: 'value',
                  axisLine: {
                    show: false
                  },
                  splitLine: {
                    lineStyle: {
                      color: '#eee'
                    }
                  },
                  axisLabel: {
                    fontSize: 12,
                    color: '#666'
                  }
                }
              ],
              series: [
                {
                  name: '预约数',
                  type: 'line',
                  smooth: true,
                  symbol: 'circle',
                  symbolSize: 8,
                  label: {
                    show: true,
                    position: 'top',
                    fontSize: 12,
                    color: '#409EFF'
                  },
                  itemStyle: {
                    color: '#409EFF'
                  },
                  areaStyle: {
                    color: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [{
                        offset: 0,
                        color: 'rgba(64,158,255,0.2)'
                      }, {
                        offset: 1,
                        color: 'rgba(64,158,255,0)'
                      }]
                    }
                  },
                  data: this.shuju.nums
                }
              ]
            }
            this.myChart.setOption(option);

            var chartDom1 = document.getElementById('index2');
            this.myChart1 = echarts.init(chartDom1);
            var option1 = {
              title: {
                text: '近七日酒店预约',
                textStyle: {
                  fontSize: 18,
                  fontWeight: 500
                },
                left: 'center',
                top: 20
              },
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'shadow'
                }
              },
              legend: {
                data: ['预约数'],
                bottom: 10
              },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '15%',
                top: '15%',
                containLabel: true
              },
              xAxis: [
                {
                  type: 'category',
                  boundaryGap: true,
                  data: this.shuju.dates,
                  axisLine: {
                    lineStyle: {
                      color: '#ddd'
                    }
                  },
                  axisLabel: {
                    fontSize: 12,
                    color: '#666'
                  }
                }
              ],
              yAxis: [
                {
                  type: 'value',
                  axisLine: {
                    show: false
                  },
                  splitLine: {
                    lineStyle: {
                      color: '#eee'
                    }
                  },
                  axisLabel: {
                    fontSize: 12,
                    color: '#666'
                  }
                }
              ],
              series: [
                {
                  name: '预约数',
                  type: 'line',
                  smooth: true,
                  symbol: 'circle',
                  symbolSize: 8,
                  label: {
                    show: true,
                    position: 'top',
                    fontSize: 12,
                    color: '#67C23A'
                  },
                  itemStyle: {
                    color: '#67C23A'
                  },
                  areaStyle: {
                    color: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [{
                        offset: 0,
                        color: 'rgba(103,194,58,0.2)'
                      }, {
                        offset: 1,
                        color: 'rgba(103,194,58,0)'
                      }]
                    }
                  },
                  data: this.shuju.orders
                }
              ]
            }
            this.myChart1.setOption(option1);

            // 响应式处理
            window.addEventListener('resize', () => {
              this.myChart.resize();
              this.myChart1.resize();
            });
          }
        })
      }
    },
    created() {
     
    },
    mounted() {
      this.init()
    },
    beforeDestroy() {
      // 销毁图表实例
      if(this.myChart) {
        this.myChart.dispose();
      }
      if(this.myChart1) {
        this.myChart1.dispose();
      }
      window.removeEventListener('resize', () => {
        this.myChart.resize();
        this.myChart1.resize();
      });
    }
 }
</script>

<style scoped>
  .index {
    width: 100%;
    height: 100%;
    font-family: '微软雅黑';
    padding: 20px;
    background-color: #f5f7fa;
  }

  .charts-container {
    display: flex;
    gap: 20px;
    height: 100%;
  }

  .chart-card {
    flex: 1;
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.05);
    transition: all 0.3s ease;
  }

  .chart-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 20px 0 rgba(0,0,0,.1);
  }
</style>